<template>
  <div>
    <nav-bar :title="$t('dashbord.apply')">
      <!-- <template v-slot:right v-if="active !== 0">
        <span class="fontSize14" @click="$router.push({path: 'Apply'})">退出</span>
      </template> -->
    </nav-bar>
    <div class="applyMessage maxinBox">
      <van-steps :active="active">
        <van-step>{{$t('dashbord.personMessage')}}</van-step>
        <van-step>{{$t('dashbord.workType')}}</van-step>
        <van-step>{{$t('dashbord.safetyTest')}}</van-step>
      </van-steps>
      <div v-if="active === 0">
        <personal @next="next"></personal>
      </div>
      <div v-if="active === 1">
        <work-type :builderId="builderId" @next="next" @prev="prev"></work-type>
      </div>
      <div v-if="active === 2">
        <test @testFile="testFile" @prev="prev"></test>
      </div>
    </div>
  </div>
</template>

<script>
  import Personal from './components/Personal.vue'
  import Test from './components/Test.vue'
  import WorkType from './components/WorkType.vue'
  export default {
    components: {
      Personal,
      Test,
      WorkType
    },
    data() {
      return {
        active: 0 || this.$route.params.value,
        builderId: this.$route.params.buildId
      }
    },
    methods:{
      // 上一步
      prev(data) {
        if (data.prev === 2) {
          this.active = 1
        } else{
          this.active = 0
        }
      },
      // 下一步
      next(data) {
        this.builderId = data.id
        if (data.next === 0) {
          this.active = 1
        } else{
          this.active = 2
        }
      },
      testFile() {
        this.active = 2
      }
    }
  }
</script>
